<template>
	<view class="imagecontent">
		<movable-area scale-area class="movable-area">
			<movable-view class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4"
				:scale-value="scale">
				<swiper @change="changeSwiper" class="lookimg" :circular="circular" :indicator-dots="indicatorDots"
					:autoplay="autoplay" :duration="duration" :current="imgId">
					<swiper-item :id="index" v-for="(item, index) in largerList" :key="index">
						<!-- 视频弹窗 -->
						<!-- #ifdef  MP-WEIXIN || H5 -->
						<video class="uni-popup-video" enable-play-gesture id="myVideo" :src="item.filePath_W" controls
							v-if="item.fileShow" :show-fullscreen-btn="showFullBtn" :muted="muted" :autoplay="autoplay"
							:auto-pause-if-navigate="autoPause" :auto-pause-if-open-native="autoPause" />
						<image class="lookimg_img" :src="Math.abs(index - imgId)  < 2 ? item.filePath_W : ''"
							mode="aspectFit"
							:style="{transform:index== imgId?`rotate(${imgRotate}deg) scale(${imgScale})`:`rotate(0deg)`}"
							v-else />
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view style="height: 100%;width: 100%;text-align: center;">
							<view v-if="item.fileShow" v-html="html" style="height: 100%;width: 100%;"></view>
							<image class="lookimg_img" :src="Math.abs(index - imgId)  < 2 ? item.filePath_W : ''"
								mode="aspectFit"
								:style="{transform:index== imgId?`rotate(${imgRotate}deg) scale(${imgScale})`:`rotate(0deg)`}"
								v-else />
						</view>
						<!-- #endif -->
					</swiper-item>
				</swiper>
			</movable-view>
		</movable-area>
		<!-- 0/15，显示当前照片总数 -->
		<view class="page">
			<text class="text">{{ imgId +1 }}/{{ largerList.length }}</text>
			<view class="share">
				<!-- 点赞 -->
				<view @click="thumBsup(largerList[imgId], imgId)" v-if="codeFile != '1'">
					<image v-if="largerList[imgId].fabuUniIcons" class="imageOne"
						src="http://106.14.56.171:15016/images/personal/dian.png" mode="" />
					<image v-else class="imageTwo" src="http://106.14.56.171:15016/images/prjdetail/Thumbsicon.png" />
					<text>{{ largerList[imgId].fabulousNum!=''?largerList[imgId].fabulousNum:'' }}</text>
				</view>
				<!-- 踩 -->
				<view @click="stomPopup(largerList[imgId], imgId)" v-if="codeFile != '1'">
					<image v-if="largerList[imgId].stopUniIcons" class="imageOne"
						src="http://106.14.56.171:15016/images/personal/stopFalse.png" mode="" />
					<image v-else class="imageTwo" src="http://106.14.56.171:15016/images/prjdetail/stompicon.png" />
					<text>{{ largerList[imgId].steponNum!=''?largerList[imgId].steponNum:'' }}</text>
				</view>
				<!-- 下载 -->
				<view @click="download(largerList[imgId])" style="margin-top: 10rpx;">
					<image class="buttonImg" src="http://106.14.56.171:15016/images/prjdetail/downloadicon.png" mode="">
					</image>
				</view>
				<!-- #ifdef MP-WEIXIN || H5 -->
				<!-- 分享照片 必须要button，因为需要open-type="share"属性 -->
				<button open-type="share" class="botton-share" v-if="shareFalse ==true">
					<image src="http://106.14.56.171:15016/images/prjdetail/shareicon.png" mode="">
					</image>
				</button>
				<button class="botton-share" v-if="shareFalse == false" @click="noShare">
					<image src="http://106.14.56.171:15016/images/prjdetail/shareicon.png" mode="">
					</image>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button class="botton-share" open-type="share" @click="appShare(largerList[imgId])" type="default">
					<image src="http://106.14.56.171:15016/images/prjdetail/shareicon.png" mode="" />
					</image>
				</button>
				<!-- 旋转图片 -->
				<!-- #endif -->
				<button class="botton-share" @click.stop="start">
					<image class="revolveImg" src="http://106.14.56.171:15016/images/prjdetail/spin.png" mode="" />
				</button>
			</view>
		</view>
		<!-- 底部弹窗踩的理由-->
		<uni-popup ref="popups" type="bottom">
			<view class="reason">
				<view class="reasonA">
					<!-- 五个理由 SingleReason -->
					<view class="" @click="reasonItem('1',item)" v-for="(item,index) in SingleReason" :key="index">
						<text>{{ item }}</text>
					</view>
					<view @click="displayAnother"><text>其他</text></view>
				</view>
				<!-- 要输入理由 -->
				<view class="inputReason" v-show="!flag">
					<textarea cols="30" rows="10" v-model="reason" placeholder="请输入其他理由(限制1-30字符)"
						maxlength="30"></textarea>
					<view class="btnReason" @click="reasonItem('2')"><text>确定</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	import {
		CurrentRouter,
		uniShareMethod
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				// 点击“其他”显示隐藏true
				flag: true,
				reason: '', //要输入理由的内容
				SingleReason: ['拍摄内容重复', '画质不清晰', '与项目不符合', '未放置比例尺', '比例尺放置不正确'],
				num: 0, //点赞的数字
				stompNum: 0, //踩的数字
				functionIcon: {
					imageID: 0,
					content: '',
					category: 0 //1是点赞 -1是踩
				},
				videoFileUrl: '', // 视频文件
				scale: 1,
				picList: [],
				indicatorDots: false,
				autoplay: false,
				duration: 500,
				circular: true,
				current: 0,
				isShowSwiper: false,
				larger: {},
				list: {},
				imgId: 0, // 当前图片下标
				largerList: [{
					fabulousNum: '', //点赞
					steponNum: '' //踩
				}], // 图片数据
				stopCodeInfo: {}, // 记录当前踩的数据
				stopCodeIndex: -1, // 记录当前踩的数据的下标
				checkImgObj: {},
				tempFilePath: '', //图片
				videoContext: null, // 视频播放实例
				showFullBtn: false,
				muted: true,
				autoplay: false,
				autoPause: true,
				codeFile: '2', // 判断是否是环氧1是时环氧
				imgItem: {}, //获取当前图片的所有数据
				imgRotate: 0, //旋转图片的度数
				imgScale: 1, //缩放的大小
				html: '',
				limitLoad: false, // 防止重复加载
				shareFalse: true
			};
		},
		computed: {
			...mapState(['userInfo'])

		},
		onLoad: function(option) {
			// this.imgRotate == 0
			//option为object类型，会序列化上个页面传递的参数
			this.larger = option;
			// code为1的时候是环氧项目
			this.codeFile = option.code ? option.code : '2'
			this.list = JSON.parse(option.arr);
			this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
			this.functionIcon.imageID = this.list.imgId;
			this.getImgLarger();
			// 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台 具体看uni官网
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		onShow() {
			if (uni.getStorageSync("accessToken")) {
				this.shareFalse = true
			} else {
				this.shareFalse = false
			}
		},
		//分享 uni API 具体看uni官网
		onShareAppMessage(res) {
			if (res.from === 'button') {
				let userCode = CurrentRouter({})
				if (userCode) return
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.larger.prjName, //自定义需要分享的名称
				imageUrl: this.checkImgObj.filePath_T //照片路径
			};
		},
		methods: {
			//ios端直接返回，因为ios会默认调起全屏方法和uniapp的会冲突
			fullScreenHandler(e) {
				if (uni.getSystemInfoSync().platform == "ios") {
					console.log('ios');
					return
				}
			},
			fullscreenclick(e) {
				console.log(e);
			},
			dblclick() {
				if (this.scale == 10) {
					this.scale = 1;
				} else {
					this.scale = 10;
				}
			},

			getImgLarger: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				console.log('加载中');
				let urlCode = ''
				if (this.codeFile == '1') {
					urlCode = `api/EpoxyProject/EpoxyProjectPlanImgsList?planId=${this.larger.id2}`
				} else {
					urlCode = `api/Project/ProjectImgsList?prjInfoId=${this.larger.id2}`
				}
				this.$http.get(urlCode).then(res => {

					this.largerList = res.map(code => {
						return {
							...code,
							fileShow: fileType(code.filePath_W)
						}
					});

					// console.log('this.largerList', this.largerList);

					//找到全部数组里的当前点击的这一项
					this.imgId = this.largerList.map(item => item.imgId).indexOf(this.list.imgId);
					this.imgItem = this.largerList.find(item => item.imgId)
					this.fetchImage(this.functionIcon.imageID, this.imgId);

					function fileType(code) {
						let num = -1
						let list = ['mp4', 'webm', 'ogg']
						list.forEach(item => {
							if (code.indexOf(item) != -1) {
								num++
							}
						})
						return num == -1 ? false : true
					}
					// #ifdef APP-PLUS
					let imageID = this.largerList.filter((item, index) => this.imgId == index)[0];
					if (imageID.fileShow) this.html =
						`<video muted id="img-preview-video" controlslist='nodownload' controls='controls' src='${imageID.filePath_W}' style='height:100%' autoplay='${this.autoplay}' poster=${imageID.filePath_T}></video>`
					else this.html = ''
					this.fetchImage(imageID.imgId, this.imgId)
					// #endif
					if (this.largerList.length == this.largerList.length) {
						this.limitLoad = false
						uni.hideLoading();
						return
					}

				});
			}, 300),
			// 图片切换的事件
			changeSwiper(e) {
				// console.log('eeeeeeeee', e);
				this.imgRotate = 0;
				this.scale = 1;
				this.imgId = e.detail.current;
				// #ifdef MP-WEIXIN || H5
				let imageID = this.largerList.filter((item, index) => this.imgId == index)[0].imgId;
				this.fetchImage(imageID, this.imgId);
				// #endif

				// #ifdef APP-PLUS
				let imageID = this.largerList.filter((item, index) => this.imgId == index)[0];
				if (imageID.fileShow) this.html =
					`<video muted id="img-preview-video" controlslist='nodownload' controls='controls' src='${imageID.filePath_W}' style='height:100%' autoplay='${this.autoplay}' poster=${imageID.filePath_T}></video>`
				else this.html = ''
				this.fetchImage(imageID.imgId, this.imgId)
				// #endif
			},
			// 点击播放视频
			clickMapFile(item) {
				console.log(item);
				if (!item.fileShow) {
					uni.showToast({
						title: '没有视频信息',
						icon: 'none'
					})
					return
				}
				this.videoFileUrl = item.filePath_W
				this.$refs.popup.open()
			},
			// 打开弹窗或者关闭弹窗的时候
			changeMapFile(item) {
				console.log('item', item)
				if (item.show) this.videoContext.play(); //播放 
				else this.videoContext.pause(); //暂停
			},


			// 获取图片点赞/踩 数据
			fetchImage(codeId, index) {
				// 环氧没有点赞
				if (this.codeFile == '1') return
				var data = {
					imgId: codeId
				};
				this.$http.get('api/Project/GetProjectImgManage', data).then(res => {
					// console.log('获取图片点赞/踩 数据', res);
					// 获取当前图片的数据
					var larger = this.largerList[index];
					// 当前照片有数据的时候
					if (Array.isArray(res) && res.length > 0) {
						var userIndex = -1
						// 查找当前账户有没有在数据中
						var UserCodeID = res.findIndex(user => user.isManage == this.userInfo.id)
						// console.log(UserCodeID, '----------------------------------')
						res.forEach(code => {
							// code.name -1 是踩 1 是赞
							if (code.name == -1) {
								larger.steponNum = code.count // 踩数量
								larger.stepManage = code.isManage // 踩的那个人
							} else {
								larger.fabulousNum = code.count // 赞数量
								larger.fabulManage = code.isManage // 赞的那个人
							}
							// 判断当前这个人有无赞或者踩
							if (code.isManage == this.userInfo.id) {
								if (code.name == -1) {
									larger.stopUniIcons = true // 赞过
									larger.fabuUniIcons = false // 没有踩过
								} else {
									larger.fabuUniIcons = true
									larger.stopUniIcons = false
								}
							}
							// 判断当前这个人都没有赞或者踩的时候
							if (UserCodeID == -1) {
								larger.fabuUniIcons = false
								larger.stopUniIcons = false
							}
							// 判断有踩没有赞
							if (code.name == -1 && res.length <= 1) {
								larger.fabulousNum = 0 // 赞数量
								larger.fabulManage = '' // 赞的那个人
							}
							// 判断有赞没有踩
							if (code.name == 1 && res.length <= 1) {
								larger.steponNum = 0 // 踩数量
								larger.stepManage = '' // 踩的那个人
							}
						})
					} else {
						// 当前照片没有数据的时候
						larger.steponNum = 0 // 踩数量
						larger.stepManage = '' // 踩的那个人
						larger.fabulousNum = 0 // 赞数量
						larger.fabulManage = '' // 赞的那个人
						larger.stopUniIcons = false // 
						larger.fabuUniIcons = false
					}
					this.largerList.splice(index, 1, larger); //name:踩 里面的“踩”变为1
					// console.log(this.largerList, larger)
				});
			},

			// 操作点赞 
			thumBsup: debounce(function(item, index) {
				let userCode = CurrentRouter({})
				if (userCode) return
				console.log(item, index, 1111111111);
				let dataValue = {
					imageID: item.imgId, // 图片id
					category: 1
				}
				// 取消当前赞
				if (item.fabuUniIcons) dataValue.isCancel = 1
				this.proiectManage(dataValue, item, index)
			}, 300),
			/**
			 * 时间： 2022/8/4，An
			 * 功能： 图片赞或者踩，
			 * 接口:  'api/Project/ProjectImgManage'，
			 * 参数： content-->内容 只有踩的时候才有,category-->-1踩 1 赞,imageID-->图片id,isCancel-->是否 取消 1 取消 否则不取消
			 */
			proiectManage(parameter, code, index) {
				var _that = this
				this.$http.post('api/Project/ProjectImgManage', parameter).then(res => {
					// 取消当前赞
					if (parameter.isCancel && parameter.isCancel == 1) {
						contentCateClose()
					} else {
						// 点赞或者踩的时候
						contentCate()
					}
					// 点赞或者踩的时候
					function contentCate() {
						// 点赞的时候
						if (parameter.category == 1) {
							// 判断当前赞是不是当前账户，是的话踩减1
							if (code.stepManage == _that.userInfo.id && code.stopUniIcons) {
								code.steponNum = code.steponNum - 1
							}
							code.fabulousNum = code.fabulousNum + 1
							code.fabuUniIcons = true // 点赞
							code.stopUniIcons = false // 踩
							code.fabulManage = _that.userInfo.id
						} else if (parameter.category == -1) {
							// 判断当前踩是不是当前账户，是的话赞减1
							if (code.fabulManage == _that.userInfo.id && code.fabuUniIcons) {
								code.fabulousNum = code.fabulousNum - 1
							}
							// 点踩的时候
							code.steponNum = code.steponNum + 1
							code.stopUniIcons = true // 点踩
							code.fabuUniIcons = false // 点赞
							code.stepManage = _that.userInfo.id
						}
					}
					// 取消点赞或者踩的时候
					function contentCateClose() {
						// 点赞的时候
						if (parameter.category == 1) {
							code.fabulousNum = code.fabulousNum - 1
							code.fabuUniIcons = false // 点赞
							code.stopUniIcons = false // 踩
							code.fabulManage = ''
						} else if (parameter.category == -1) {

							// 点踩的时候
							code.steponNum = code.steponNum - 1
							code.stopUniIcons = false // 点踩
							code.fabuUniIcons = false // 点赞
							code.stepManage = ''
						}
					}
					this.largerList.splice(index, 1, code)
				}).catch(err => {})
			},
			// 踩 打开踩的理由页面
			stomPopup: debounce(function(code, index) {
				let userCode = CurrentRouter({})
				if (userCode) return
				if (code.stopUniIcons) {
					let dataValue = {
						imageID: code.imgId, // 图片id
						category: -1,
						isCancel: 1
					}
					this.proiectManage(dataValue, code, index)
					return
				}
				this.stopCodeInfo = code
				this.stopCodeIndex = index
				this.$refs.popups.open('bottom');
			}, 300),
			// 操作踩
			reasonItem(code, item) {
				this.$refs.popups.close();
				// 列表数据
				if (code == '1') {
					let dataValue = {
						imageID: this.stopCodeInfo.imgId, // 图片id
						category: -1,
						content: item
					}
					this.proiectManage(dataValue, this.stopCodeInfo, this.stopCodeIndex)
					return
				}
				// 自定义输入理由
				if (code == '2' && this.reason != '') {
					let dataValue = {
						imageID: this.stopCodeInfo.imgId, // 图片id
						category: -1,
						content: this.reason
					}
					this.proiectManage(dataValue, this.stopCodeInfo, this.stopCodeIndex)
					this.reason = ''
				} else {
					uni.showToast({
						title: '请输入你的理由',
						icon: 'none'
					})
				}
			},
			// 点击"其他"弹出要输入的理由框
			displayAnother() {
				this.flag = !this.flag;
			},
			// 下载
			download(item) {
				let userCode = CurrentRouter({})
				if (userCode) return
				//照片格式：png,jpg,PNG,JPG
				//视频格式：mp4
				let format = item.filePath_W.slice(item.filePath_W.length - 4, item.filePath_W.length)

				// #ifdef MP-WEIXIN
				// 判断微信小程序保存到相册授权
				if (format == '.mp4') {
					this.downView(item.filePath_W)
				} else {
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: (reg) => {
							this.downFile(item.filePath_W)
						}
					})
				}
				// #endif
				// #ifdef APP
				// 判断app保存到相册授权
				if (format == '.mp4') {
					this.downView(item.filePath_W)
				} else {
					this.downFile(item.filePath_W)
				}
				// #endif
			},
			// 下载照片
			downFile(file) {
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				uni.downloadFile({
					url: file, //下载资源的 url
					success: res => {
						var tempFilePath = res.tempFilePath; // 这里拿到后端返回的图片路径
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({ // 然后调用这个方法
								filePath: tempFilePath,
							})
							uni.hideLoading();
							uni.showToast({
								title: "下载成功",
								icon: "success"
							});
						} else {
							uni.showToast({
								title: "资源格式错误，请联系管理员"
							});
						}
					},
					fail: (err) => {
						// 下载失败提醒
						uni.hideLoading();
						uni.showToast({
							title: "下载失败"
						})
					}
				});
			},
			// 下载视频
			downView(Video) {
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				uni.downloadFile({
					url: Video,
					success(res) {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath
							})
							uni.hideLoading();
							// 提示用户下载成功
							uni.showToast({
								title: "下载成功",
								icon: "success"
							});
						}
					},
					fail() {
						// 下载失败提醒
						uni.hideLoading();
						uni.showToast({
							title: "下载失败"
						})
					}
				})
			},
			noShare(){
				let userCode = CurrentRouter({})
				if (userCode) return
			},
			// #ifdef APP-PLUS || H5
			appShare(item) {
				// console.log('item陈征', item);
				let userCode = CurrentRouter({})
				if (userCode) return
				//照片格式：png,jpg,PNG,JPG
				//视频格式：mp4
				let formatVideo = item.filePath_W.substring(item.filePath_W.length - 4);
				if (formatVideo == '.mp4') {
					this.shareText = '【视频】'
				} else {
					this.shareText = '【图片】'
				}
				uniShareMethod({
					path: `pages/project/project_img/imgPreview?name=图片&arr=${this.larger.arr}&id2=${this.larger.id2}&code=${this.larger.code}&prjName=${this.larger.prjName}`,
					share: {
						title: this.shareText + this.larger.prjName,
						imageUrl: item.filePath_T,
					}
				}).then(res => {}).catch(err => {})
			},
			//#endif
			// 点击旋转图片
			start() {
				console.log('点击旋转图片', this.imgRotate);
				this.imgRotate += 90;
				if (this.imgRotate % 180 == 0) {
					this.imgScale = 1;
				} else {
					this.imgScale = 0.5;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.prj_imgs_content {
		margin-left: 20rpx;
	}

	.movable-view {
		height: 100%;
		width: 100%;
	}

	.page {
		position: absolute;
		width: 100%;
		height: 172rpx;
		bottom: 0;
		text-align: center;
		// background-color: aqua;
		background-color: rgba(0, 0, 0, 0.5);

		.text {
			color: #fff;
			font-size: 24rpx;
			// background-color: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			user-select: none;
		}
	}

	.movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}

	.lookimg {
		display: block;
		position: fixed;

		width: 100%;
		height: 90%;
		/* 重点来咯 */
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		-webkit-transform: translate(-50%, -50%);
	}

	.lookimg_img {
		margin: auto;
		display: block;
		position: fixed;
		width: 100%;
		height: 94%;
		/* 重点来咯 */
		position: absolute;
		/* #ifdef APP-PLUS  */
		// top: 50%;
		// left: 50%;
		/* #endif */
		z-index: 3;
		-webkit-transform: translate(-50%, -50%);
	}

	.imagecontent {
		width: 100%;
		height: 100%;
		background: #000000;
		top: 0;
		position: fixed;
	}

	// 点赞、踩、下载、分享照片
	.share {
		position: absolute;
		width: 100%;
		height: 55rpx;
		display: flex;
		bottom: 67rpx;
		z-index: 99;
		left: 2%;
		// background-color: #04be02;

		>view,
		>button {
			width: 200rpx;
			height: 80rpx;
			// background-color: aqua;
			display: flex;
			justify-content: space-around;
			color: #ffffff;
			background-color: transparent;

			>image {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}

	.buttonImg {
		/* #ifdef APP-PLUS|| MP-WEIXIN */
		margin-top: -8rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 4rpx;
		/* #endif */
	}

	.revolveImg {
		width: 45rpx;
		height: 45rpx;
	}

	.botton-share::after {
		border: none;
	}

	// 底部弹窗踩的理由
	.reason {
		width: 100%;
		height: 1300rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #ffffff;

		.reasonA {
			position: relative;
			top: 40rpx;
			width: 90%;
			margin: auto;
			font-weight: 600;
			// background-color: aqua;

			>view {
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;
				border-bottom: 1px solid #f2f2f2;
			}
		}

		// 输入理由
		.inputReason {
			position: relative;
			top: 14rpx;
			width: 90%;
			height: 500rpx;
			margin: auto;
			z-index: 99999999;
			// background-color: blanchedalmond;

			>textarea {
				width: 100%;
				height: 300rpx;
				margin: auto;
				background-color: #fafafa;
				text-indent: 40rpx;
				padding-top: 25rpx;
			}

			.btnReason {
				position: relative;
				top: 40rpx;
				width: 450rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin: auto;
				background-color: #9e001a;
				border-radius: 50rpx;
				color: #ffffff;
				text-align: center;
			}
		}
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}
</style>
<!-- #ifdef APP-PLUS -->
<style lang="less">
	video {
		width: 90vw;
		height: 90vh;
	}
</style>
<!-- #endif -->